<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

		<title>radio-checkbox-switch</title>
		<link rel="stylesheet" href="./dist/css/radio-checkbox-switch.css">
		<link rel="stylesheet" href="./dist/css/demo.css">
	</head>
	<body>
		<div class="container">
			<!-- checkbox -->
			<h2>checkbox</h2>
			<div class="item-gropu">
				<div class="item">
					<label class="el-checkbox el-checkbox-primary el-checkbox-xs">
						<input class="el-hidden" type="checkbox" name="check">
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">xs checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-primary el-checkbox-xs">
						<input class="el-hidden" type="checkbox" name="check" checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">xs checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-primary el-checkbox-xs">
						<input class="el-hidden" type="checkbox" name="check" disabled>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">xs checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-primary el-checkbox-xs">
						<input class="el-hidden" type="checkbox" name="check" disabled checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">xs checkbox</span>
					</label>
				</div>
			</div>
			
			<div class="item-gropu">
				<div class="item">
					<label class="el-checkbox el-checkbox-success el-checkbox-sm">
						<input class="el-hidden" type="checkbox" name="check">
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">sm checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-success el-checkbox-sm">
						<input class="el-hidden" type="checkbox" name="check" checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">sm checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-success el-checkbox-sm">
						<input class="el-hidden" type="checkbox" name="check" disabled>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">sm checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-success el-checkbox-sm">
						<input class="el-hidden" type="checkbox" name="check" disabled checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">sm checkbox</span>
					</label>
				</div>
			</div>
			
			<div class="item-gropu">
				<div class="item">
					<label class="el-checkbox el-checkbox-warning el-checkbox-md">
						<input class="el-hidden" type="checkbox" name="check">
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">md checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-warning el-checkbox-md">
						<input class="el-hidden" type="checkbox" name="check" checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">md checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-warning el-checkbox-md">
						<input class="el-hidden" type="checkbox" name="check" disabled>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">md checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-warning el-checkbox-md">
						<input class="el-hidden" type="checkbox" name="check" disabled checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">md checkbox</span>
					</label>
				</div>
			</div>
			
			<div class="item-gropu">
				<div class="item">
					<label class="el-checkbox el-checkbox-danger el-checkbox-lg">
						<input class="el-hidden" type="checkbox" name="check">
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">lg checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-danger el-checkbox-lg">
						<input class="el-hidden" type="checkbox" name="check" checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">lg checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-danger el-checkbox-lg">
						<input class="el-hidden" type="checkbox" name="check" disabled>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">lg checkbox</span>
					</label>
				</div>
				<div class="item">
					<label class="el-checkbox el-checkbox-disabled el-checkbox-danger el-checkbox-lg">
						<input class="el-hidden" type="checkbox" name="check" disabled checked>
						<span class="el-checkbox-style"></span>
						<span class="el-checkbox-text">lg checkbox</span>
					</label>
				</div>
			</div>
			<br>
			
			<!-- radio -->
			<h2>radio</h2>
			<div class="item-gropu">
				<div class="item">
					<label class="el-radio el-radio-primary el-radio-xs">
						<input class="el-hidden" type="radio" name="b1">
						<span class="el-radio-style"></span>
						<span class="el-radio-text">xs radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-primary el-radio-xs">
						<input class="el-hidden" type="radio" name="b1" checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">xs radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-primary el-radio-xs">
						<input class="el-hidden" type="radio" name="b2" disabled>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">xs radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-primary el-radio-xs">
						<input class="el-hidden" type="radio" name="b2" disabled checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">xs radio</span>
					</label>
				</div>
			</div>
			<div class="item-gropu">
				<div class="item">
					<label class="el-radio el-radio-success el-radio-sm">
						<input class="el-hidden" type="radio" name="b3">
						<span class="el-radio-style"></span>
						<span class="el-radio-text">sm radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-success el-radio-sm">
						<input class="el-hidden" type="radio" name="b3" checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">sm radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-success el-radio-sm">
						<input class="el-hidden" type="radio" name="b4" disabled>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">sm radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-success el-radio-sm">
						<input class="el-hidden" type="radio" name="b4" disabled checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">sm radio</span>
					</label>
				</div>
			</div>
			<div class="item-gropu">
				<div class="item">
					<label class="el-radio el-radio-warning el-radio-md">
						<input class="el-hidden" type="radio" name="b5">
						<span class="el-radio-style"></span>
						<span class="el-radio-text">md radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-warning el-radio-md">
						<input class="el-hidden" type="radio" name="b5" checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">md radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-warning el-radio-md">
						<input class="el-hidden" type="radio" name="b6" disabled>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">md radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-warning el-radio-md">
						<input class="el-hidden" type="radio" name="b6" disabled checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">md radio</span>
					</label>
				</div>
			</div>
			<div class="item-gropu">
				<div class="item">
					<label class="el-radio el-radio-danger el-radio-lg">
						<input class="el-hidden" type="radio" name="b7">
						<span class="el-radio-style"></span>
						<span class="el-radio-text">lg radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-danger el-radio-lg">
						<input class="el-hidden" type="radio" name="b7" checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">lg radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-danger el-radio-lg">
						<input class="el-hidden" type="radio" name="b8" disabled>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">lg radio</span>
					</label>
				</div>
				<div class="item">
					<label class="el-radio el-radio-disabled el-radio-danger el-radio-lg">
						<input class="el-hidden" type="radio" name="b8" disabled checked>
						<span class="el-radio-style"></span>
						<span class="el-radio-text">lg radio</span>
					</label>
				</div>
			</div>
			<br>
			
			<!-- switch -->
			<h2>switch</h2>
			<div class="item-gropu">
				<div class="item">
					<label class="el-switch el-switch-xs el-switch-primary">
						<input class="el-hidden" type="checkbox">
						<span class="el-switch-style"></span>
						<span class="el-switch-text">xs switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-xs el-switch-primary">
						<input class="el-hidden" type="checkbox" checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">xs switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-xs el-switch-primary">
						<input class="el-hidden" type="checkbox" disabled>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">xs switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-xs el-switch-primary">
						<input class="el-hidden" type="checkbox" disabled checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">xs switch</span>
					</label>
				</div>
			</div>
			
			<div class="item-gropu">
				<div class="item">
					<label class="el-switch el-switch-sm el-switch-success">
						<input class="el-hidden" type="checkbox">
						<span class="el-switch-style"></span>
						<span class="el-switch-text">sm switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-sm el-switch-success">
						<input class="el-hidden" type="checkbox" checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">sm switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-sm el-switch-success">
						<input class="el-hidden" type="checkbox" disabled>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">sm switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-sm el-switch-success">
						<input class="el-hidden" type="checkbox" disabled checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">sm switch</span>
					</label>
				</div>
			</div>
			
			<div class="item-gropu">
				<div class="item">
					<label class="el-switch el-switch-md el-switch-warning">
						<input class="el-hidden" type="checkbox">
						<span class="el-switch-style"></span>
						<span class="el-switch-text">md switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-md el-switch-warning">
						<input class="el-hidden" type="checkbox" checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">md switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-md el-switch-warning">
						<input class="el-hidden" type="checkbox" disabled>
							<span class="el-switch-style"></span>
						<span class="el-switch-text">md switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-md el-switch-warning">
						<input class="el-hidden" type="checkbox" disabled checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">md switch</span>
					</label>
				</div>
			</div>
			
			<div class="item-gropu">
				<div class="item">
					<label class="el-switch el-switch-lg el-switch-danger">
						<input class="el-hidden" type="checkbox">
						<span class="el-switch-style"></span>
						<span class="el-switch-text">lg switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-lg el-switch-danger">
						<input class="el-hidden" type="checkbox" checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">lg switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-lg el-switch-danger">
						<input class="el-hidden" type="checkbox" disabled>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">lg switch</span>
					</label>
				</div>
				<div class="item">
					<label class="el-switch el-switch-disabled el-switch-lg el-switch-danger">
						<input class="el-hidden" type="checkbox" disabled checked>
						<span class="el-switch-style"></span>
						<span class="el-switch-text">lg switch</span>
					</label>
				</div>
			</div>
		</div>
	</body>
</html>
